import {createStyles, Theme, withStyles} from '@material-ui/core/styles';
import {WithStyles} from "@material-ui/core/styles/withStyles";
import {Menu} from "antd";
import Col from "antd/lib/grid/col";
import Row from "antd/lib/grid/row";
import * as React from "react";
import {Switch} from "react-router";
import {Link} from "react-router-dom";
import AuthRoute from "../../component/AuthRoute";
import userBg from "../../images/bg.png";
// import {getUserInfo} from "../../axios/Request";
import BaseInfo from "./HealthApps/BaseInfo";
import OutpatientRecord from "./HealthApps/OutpatientRecord";

const styles = (theme: Theme) => {
    return createStyles({
        root: {
            margin: '10px 0'
        },
        userCard: {
            // display: "flex",
            backgroundImage: `url(${userBg})`,
            borderRadius: "5px",
            backgroundSize: "cover",
            // flexDirection: "column",
            // justifyContent: "center",
            // alignItems: "left ",
            textAlign: "left",
            padding: "10px 10px 10px 30px",
            color: "rgb(255,255,255)",
            "& h3": {
                color: "#ffffff",
                margin: 0,
                marginBottom: 10
            },
            "& p": {
                marginBottom: 0,
                "& span": {
                    fontSize: "16px",
                    fontWeight: 'bolder'
                }
            }
        },
        menubg: {
            overflow: "hidden",
            borderRadius: "5px",
            marginTop: "10px",
            height: "54vh",
            backgroundColor: "rgb(255,255,255)",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
            borderColor: "rgba(0, 0, 0, 0.09)",
            "& li:after": {
                border: "0px"
            },
            "& .ant-menu-item > a:hover": {
                color: "#3987cf"
            },
            "& .ant-menu .ant-menu-item": {
                margin: 0
            },
            "& .ant-menu-inline .ant-menu-item:after": {
                borderRight: "3px solid #3987cf"
            },
            "& .ant-menu .ant-menu-item-selected": {
                backgroundColor: "#3987cf",
            },
            "& .ant-menu-item-selected > a, .ant-menu-item-selected > a:hover": {
                color: "#ffffff"
            }
        },
        centerRight: {
            borderRadius: "5px",
            height: "76vh",
            backgroundColor: "rgb(255,255,255)",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
            borderColor: "rgba(0, 0, 0, 0.09)",
            marginLeft: "10px",
            padding: "20px"
        }
    });
};

interface Iprops extends WithStyles<typeof styles> {
    // 用户信息
}

interface Istates {
    user: string,
    tel: number,
    userId: number,
    current: string
}

class HealthFile extends React.Component<Iprops, Istates> {
    // 初始化用户信息
    constructor(props: Iprops) {
        super(props);
        this.state = {
            user: "",
            tel: 1,
            userId: 1,
            current: '1'
        }
    }

    // public componentWillMount(){
    // }
    public handleClick = (e: any) => {
        this.setState({
            current: e.key,
        });
    };

    public render() {
        const {classes} = this.props;
        return (
            <Row>
                <Col span={5}>
                    <div className={classes.userCard}>
                        <h3>{"王昱"}</h3>
                        <p>电话:<br/>
                            <span>
                                {12423534645}
                            </span>
                        </p>
                        <p>
                            身份证号:<br/>
                            <span>
                                {546546456164651651}
                            </span>
                        </p>
                    </div>
                    <div className={classes.menubg}>
                        <Menu style={{width: "100%"}} mode="inline"
                              onClick={this.handleClick}
                              selectedKeys={[this.state.current]}>
                            <Menu.Item key="1">
                                <Link to={"/healthFile"}>基本信息</Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Link to={"/healthFile/OutpatientRecord"}>就诊记录</Link>
                            </Menu.Item>
                        </Menu>
                    </div>
                </Col>
                <Col span={19}>
                    <div className={classes.centerRight}>
                        <Switch>
                            <AuthRoute
                                path={"/healthFile"}
                                exact={true}
                                component={BaseInfo}
                            />
                            <AuthRoute
                                path={"/healthFile/OutpatientRecord"}
                                exact={true}
                                component={OutpatientRecord}
                            />
                        </Switch>
                    </div>
                </Col>
            </Row>
        )
    }
}

export default withStyles(styles)(HealthFile);